<template>
  <div class="startinterface">
    <input type="text" v-model="vlaue">
    <div @click="sORj('创建')">创建房间</div>
    <div @click="sORj('加入')">加入房间</div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, getCurrentInstance, watch } from 'vue';

const $sORj = getCurrentInstance()?.appContext.app.config.globalProperties.$sORj
const vals = ref<string>('')
const props = defineProps<{
  socket: WebSocket
}>()
const vlaue = ref<string>('')
const sORj = (val: string) => {
  vals.value = val
  props.socket.send(JSON.stringify({ id: vlaue.value, type: val }))
}
//监听房间是否创建成功
watch($sORj, (newValue, oldValue) => {
  if ($sORj.value.message == vals.value + '成功') {
    console.log(newValue, '更新的值');
    emit('isShow', newValue)
  }
  console.log($sORj.value);
})
const emit = defineEmits<{
  // 事件名
  (e: 'isShow', newValue: any): void

}>()
</script>
<style lang="scss">
.startinterface {
  position: absolute;
  width: 400px;
  height: 400px;
  margin: auto;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
  text-align: center;
  border-radius: 10px;
  background-color: rgb(255, 255, 146);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}
</style>